<template>
  <div style="width:100%;height:100%;" id="defectRate"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'defectRate',
    props: {
      defectRate: Array,
    },
    data() {
      return {};
    },
    methods: {
      init() {
        let defectRate = this.defectRate;
        let defectRateMap = echarts.init(document.getElementById('defectRate'));
        let xAxisTxt = [];
        let dataBugRate = [];
        let dataMeanBugRate = [];
        defectRate.forEach((item) =>{
          xAxisTxt.push(item.month);
          dataBugRate.push(parseFloat(item.bugRate));
          dataMeanBugRate.push(parseFloat(item.hotalDefectRate));
        });
        let labelOption = {
          normal: {
            show: false,
            // color: '#2D8cF0',
            formatter: "{c}%",
            textStyle: {
              fontSize: 20
            }
          }
        };
        let option = {
          // title: {
          //   text: '有效缺陷数',
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data:['缺陷率','参考缺陷率']
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisTxt,
              axisLabel: {
                interval:0,
                rotate:48
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              // axisLine: {show: false},
              // axisTick: {show: false},
              axisLabel: {
                formatter: '{value}%'
              },
            }
          ],
          grid: {
            left:'12%',
            top: '20%',
            bottom: '20%'
          },
          series: [
            {
              name: '缺陷率',
              type: 'line',
              label: labelOption,
              itemStyle: {
                normal: {
                  color:'#ff9681',
                }
              },
              areaStyle: {normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#ff9681'},
                      {offset: 0.5, color: '#f7c5bc'},
                      {offset: 1, color: '#ffffff'}
                    ]
                  )
                }},
              data: dataBugRate,
            },
            {
              name: '参考缺陷率',
              type: 'line',
              label: labelOption,
              itemStyle: {
                normal: {
                  color:'#2D8cF0',
                }
              },
              areaStyle: {normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#2D8cF0'},
                      {offset: 0.5, color: '#bddcfb'},
                      {offset: 1, color: '#ffffff'}
                    ]
                  )
                }},
              data: dataMeanBugRate,
            }
          ]
        };
        defectRateMap.setOption(option);
      }
    },
    watch: {
      defectRate: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>

<style scoped>

</style>

